<template>
  <div>
    <div class="home">
      <div class="container">
        <div class="title-name">
          <p>音乐MV：Hwi Hwi！</p>
        </div>
        <div class="video-box"></div>
      </div>
      <div class="search-box">
        <el-input placeholder="请粘贴网站地址" v-model="input3" class="input-with-select input-search">
          <el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 120px">
            <el-option v-for="item in lineList" :label="item.label" :value="item.value" :key="item.value">
              {{item.label}}
            </el-option>
          </el-select>
          <el-button slot="append" type="primary" icon="el-icon-search">解析播放</el-button>
        </el-input>
       <span class="tips">
         <i class="el-icon-info"></i>
       </span>
      </div>
    </div>
    <!--底部内容-->
    <About></About>
  </div>
</template>

<script>
// @ is an alias to /src
import About from './About'

export default {
  name: 'home',
  components: { About },
  data () {
    return {
      input3: '',
      select: 1,
      lineList: [
        { label: '默认一', value: 1 },
        { label: '万能搜索', value: 2 },
        { label: '线路二', value: 3 },
        { label: '线路三', value: 4 },
        { label: '线路四', value: 5 }
      ]
    }
  }
}
</script>
<style lang="less">
  .home{
    background: url("../assets/bg.jpg");
    background-size: 100% 100%;
    overflow: hidden; //解决margin-top/bottom 会有重叠现象
    .container{
      margin: 30px 80px 0 80px;
      background: #000;
      border: 1px solid rgb(0,0,0);
      border-radius:5px;
      box-shadow: 0 2px 4px rgba(255, 25, 56, 0.12), 0 0 6px rgba(255, 255, 255, 0.04);
      .title-name{
        color: white;
        background: rgba(0,0,0,.31);
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
      }
      .title-name p::before{
        content:'正在播放:';
        color: rgb(178,178,178);
        font-size: 13px;
        padding-right:10px;
      }
      .video-box{
        background: #000;
        width: 100%;
        height: 600px;
      }
    }
    .search-box{
      margin: 5px 80px 10px 80px;
      padding:0 20px;
      height:80px;
      border-radius:5px;
      background: rgba(255,255,255,.9);
      .input-search{
        margin: 10px 0 4px;
      }
      .tips{
        font-size:12px;
        color:rgb(62,62,62);
        i::after{
          content:'若视频播放异常，尝试刷新或更换接口即可解决!新增搜索';
          margin-left:5px;
        }
      }
      .el-button:hover{
        background:rgb(62,62,62)!important;
      }
      .el-button:hover > span{
        color: white!important;
      }
      .el-button:hover > i{
        color: white!important;
      }
    }
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }
</style>
